<template>
  <div
    class="fixed sm:top-[64px] top-0 bg-[rgba(0,0,0,0.5)] left-[0%] z-[99] w-full h-full border flex justify-center items-center"
    v-if="visible">
    <div class="sm:w-[80%] w-full sm:h-[80%] h-full flex justify-center items-center sm:relative">
      <video class="w-full   h-full bg-black self-start" controls>
        <source src="@/assets/1.mp4" type="video/mp4" />
      </video>
      <div class="absolute top-0 right-[20px] sm:right-[20px] sm:top-[20px] coursor-pointer">
        <button class="text-white text-2xl" @click="emit('close')">X</button>
      </div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  videoUrl: {
    type: String,
    default: "",
  },
  visible: {
    type: Boolean,
    default: false,
  },
  width: {
    type: String,
    default: "80%",
  },
  height: {
    type: String,
    default: "auto",
  },
});
const emit = defineEmits(["close"]);
</script>

<style lang="less" scoped></style>
